<template>
    <el-dialog :visible.sync="dialogVisible"
               class="dialog-title w-[30%]"
               :title="optionType?'修改材料信息':'新增材料'"
               :close-on-click-modal="false">
        <el-form :model="materialItemsInfo" :rules="rules" ref="materialItemsInfo" :label-position="labelPosition" class="container" label-width="50px">
            <el-form-item :label="$t('message.materialLibraryManager.number')" prop="number">
                <el-input v-model="materialItemsInfo.number" class="border inputWidth"></el-input>
            </el-form-item>
            <el-form-item :label="$t('message.materialLibraryManager.name')" prop="name">
                <el-input v-model="materialItemsInfo.name" class="border inputWidth"></el-input>
            </el-form-item>
            <el-form-item :label="$t('message.materialLibraryManager.level')" prop="level">
                <el-input v-model="materialItemsInfo.level" class="border inputWidth"></el-input>
            </el-form-item>
            <el-form-item :label="$t('message.materialLibraryManager.area')" prop="area">
                <el-input v-model="materialItemsInfo.area" class="border inputWidth"></el-input>
            </el-form-item>
            <el-form-item :label="$t('message.materialLibraryManager.density')" prop="density">
                <el-input v-model="materialItemsInfo.density" class="border inputWidth"></el-input>
            </el-form-item>
            <el-form-item :label="$t('message.materialLibraryManager.standard')" prop="standard">
                <el-input v-model="materialItemsInfo.standard" class="border inputWidth"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="confirm('materialItemsInfo')">确定</el-button>
            <el-button @click="cancel">取消</el-button>
        </div>
    </el-dialog>
</template>

<script>


import {materialLibraryCommand} from "../../../command/MaterialLibraryCommand";

export default {
    name: "MaterialAdd",
    props: {
        selectedRowData: {
            type: Object,
            default: null
        },
        selectedRowNumber: {
            type: String,
            default: null
        },
        optionType: {
            type: Number,//0:添加；1:修改
            default: 0,
        },
        dialogVisible: {
            type: Boolean,
            default: false
        },
    },
    data() {
        return {
            visible: true,
            labelPosition: 'right',
            formLabelWidth: '80px',
            materialItemsInfo: {},
            materialNumber:'',
            rules: {
                number: [
                    { required: true, validator: this.validateNumber,trigger: 'change'},
                    { min: 0, max: 20, message: '长度在 0 到 20 个字符', trigger: 'change' }
                ],
                name: [
                    { required: true, min: 0, max: 30, message: '长度在 0 到 30 个字符',trigger: 'change' }
                ],
                level: [
                    {  min: 0, max: 30, message: '请输入牌号或者型类级', trigger: 'change' }
                ],
                area: [
                    { required: true, min: 0, max: 30, message: '请输入毛料尺寸', trigger: 'change' }
                ],
                density: [
                    { min: 0, max: 30, message: '请输入面密度', trigger: 'change' }
                ],
                standard: [
                    {  min: 0, max: 30, message: '请输入材料规范', trigger: 'change' }
                ],
            }
        };
    },
    methods: {
        async validateNumber(rule, value, callback) {
            if (value === '' || value === undefined) {
                callback(new Error('请输入材料编号'))
            } else if (await this.existNumber(value) && value !== this.selectedRowNumber) {
                callback(new Error('材料编号不能重复'))
            }
        },
        existNumber(info) {
            return new Promise(resolve=>{
                materialLibraryCommand.getMaterialLibraryDate(res => {
                    let numberList = res.map(item => item.number);
                    if (numberList.includes(info)) {
                        resolve(true)
                    }
                    resolve(false);
                })
            })
        },
        cancel() {
            this.$emit('close-manager-dialog', false);
            this.$refs.materialItemsInfo.resetFields();
            this.selectedRowNumber = '';
        },
        confirm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$emit('confirm-manager-dialog', this.materialItemsInfo);
                    this.selectedRowNumber = '';
                } else {
                    this.$refs.materialItemsInfo.resetFields();
                    return false;
                }
            });
        },
    },
    watch: {
        selectedRowData: {
            handler(newVal) {
                this.materialItemsInfo = newVal;
            }
        },
        selectedRowNumber: {
            handler(newVal) {
                this.materialNumber = newVal;
            }
        }
    }
}
</script>

<style scoped>

.container{
    width: 100%;
}

>>> .el-dialog{
    margin-top: 5vh !important;
    width: 40%;
}

.el-form-item{
    display: flex;
    margin-bottom: 25px;
    line-height: 30px;
}

>>> .el-form-item__content{
    margin-left: 0;
    line-height: 30px;
}

.inputWidth{
    width: 210px;
    border-radius: 4px;
}

>>> .el-form-item__label {
    display: flex;
    line-height: 30px;
}
>>> .el-dialog__body{
    padding: 10px 15px 0;
}

>>> .el-dialog__footer{
    padding: 0 20px 20px;
}

>>>.el-form-item.is-error .el-input__inner{
    border-bottom: 0;
}


</style>